<template>
  <div>
  <el-sub-menu
    v-if="
      menu.isShow &&
      menu.type === 0
    "
    :index="menu.id + ''"
    style="width: 250px"
  >
    <template #title>{{ menu.name }}</template>
    <menus-item
      v-for="(item, index) in menu.children"
      :key="index"
      :menu="item"
    ></menus-item>
  </el-sub-menu>

  <el-menu-item
    v-if="menu.isShow && menu.type === 1"
    style="width: 250px"
    :index="menu.router"
  >
    <span>{{ menu.name }}</span>
  </el-menu-item>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "menusItem"
})

defineProps<{
  menu: menusType
}>()
</script>

<style scoped lang="scss">
:deep(.el-menu-item.is-active){
  background-color: var(--primary-active-color);
  color: white;
}
</style>
